import { Modal,Form ,Input,Button,Table} from 'antd';
import React, {useEffect, useState} from 'react';
import type { ColumnsType } from 'antd/es/table';
import '../../assets/css/FeeAdd.css'
import {getHousesList} from "../../apis/houses";
function FeeHouse(props:any) {
    const rowSelection = {
        onChange: (selectedRowKeys: any, selectedRows: any) => {
            setSelection(selectedRows)
        },
        getCheckboxProps: (record: any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [selection,setSelection] = useState([])
    const [selectionType, ] = useState<'checkbox' | 'radio'>('checkbox');
    const handleOk = () => {
        props.gethouseidAdd(selection)
        props.getHouseShow(false)
    };
    //房间号
    const [house,getHouse] = useState([])
    const [params,setParams] = useState({
        page:1,
        psize:10,
        houseno:''
    })
    const getHouses = async()=>{
        const res:any = await getHousesList({...params,buildingid:props.buildingId}).catch()
        if(res&&res.errCode===10000){
            getHouse(res.data.list)
        }
    }
    const onFinsh = (values:any)=>{
        setParams({...params,houseno:values.houseno})
    }
    useEffect(()=>{
        getHouses()
    },[params])
    const handleCancel = () => {
        props.getHouseShow(false)
    };
    const columns: ColumnsType<any> = [
        {
            title: '楼号',
            dataIndex: 'building',
        },
        {
            title: '房间号',
            dataIndex: 'houseno',
        },
        {
            title: '业主',
            dataIndex: 'age',
        },
        {
            title: '电话',
            dataIndex: 'mobile',
        },
    ];

    return (
        <>
            <Modal
                title="选择房屋"
                className="feeHouse"
                open={props.houseShow}
                onOk={handleOk}
                width="50%"
                onCancel={handleCancel}
            >
                <Form name="horizontal_login" style={{marginBottom:'20px'}} initialValues={{buildingid: props.buildingId}} onFinish={onFinsh} layout="inline">
                    <Form.Item name="houseno" label="房间号">
                        <Input/>
                    </Form.Item>
                    <Form.Item name="buildingid" label="小区名称">
                        <Input disabled={true} />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Form.Item>
                </Form>
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    bordered
                    rowKey={record => record.id}
                    columns={columns}
                    dataSource={house}
                />

            </Modal>
        </>
    );
}

export default FeeHouse;
